<template>
<div>学习pinia的例子</div>
<button @click="test">点击1</button>
<button @click="changePinia">点击2</button>
<button @click="changePinia3">点击3</button>
<button @click="changePinia4">点击4</button>
 数字 {{store.count}}
 姓名 {{store.name}}
</template>


<script  setup>
import { ref, reactive ,onRenderTracked, toRefs} from "vue";
import {mainStore} from '../store/user.js';
import { fetchData } from "../api/index";
const store = mainStore()
const query = reactive({
  address: "",
  name: "",
  pageIndex: 1,
  pageSize: 10,
});
const tableData = ref([])
const formDate= ref({
test:[]
})

const pageTotal = ref(0)

const dataList = reactive({
  name:'zc',
  age:'20',
  address:'guilin',
  wife:{
    name:'嘻嘻嘻',
    age:'181',
    address:'我的',
  },
  border:{
    name:'兄弟',
    age:'22',
    address:'我的',
  },
})
const {name,wife,border} = toRefs(dataList)
//方法一 1
const test = ()=>{
  store.count++//改变pinia中的数据


}
//方法二
const changePinia = () => {//改变pinia中的数据 方法二：可以多状态进行修改
  store.$patch({
  count:store.count+2,
  name:'gg'+1
  })
};
//方法三  通过函数的形式
const changePinia3 = () => {
  store.$patch((state)=>{
  state.count++;
  state.name = state.name+'1'
  } )
};
//方法四
const changePinia4 = () => {
store.increment()
};

//获取表格数据

const getData = () => {
  fetchData(query).then((res) => {
    tableData.value = res.list;
    pageTotal.value = res.pageTotal || 50;
    // console.log(tableData.value)
  });
}
getData()
const cont = ref(0)
const isshow = ref(true)

onRenderTracked((event)=>{
console.log('1', event)
})
const handleClick = () => {
  alert('点击了按钮！')

};



</script>
<style scoped>

</style>
